<!--
 * @Author: Wangtao
 * @Date: 2020-10-22 19:27:39
 * @LastEditors: Wangtao
 * @LastEditTime: 2021-01-27 14:32:04
-->
<template>
  <continer>
    <template slot="content">
      <el-form
        class="m7-form"
        :label-position="labelPosition"
        :model="formData"
        size="mini"
        :rules="rules"
        ref="nodeForm"
      >
        <el-form-item label="节点名称" prop="name">
          <el-input v-model="formData.name" size="mini"></el-input>
        </el-form-item>
        <el-form-item label="引导文案" prop="guideContent">
          <el-input v-model="formData.guideContent" size="mini"></el-input>
        </el-form-item>
        <div class="group-title">引导分支
          <el-tooltip content="微信官方客服渠道引导菜单最多为10个，超过个数将导致消息错误" placement="top">
            <i style="font-size: 12px; color: #B3B9C7; padding-right :6px" class="V7_iconfont V7_iconV7tubiao_bangzhu-42"></i>
          </el-tooltip>
        </div>
        <div
          class="select-group"
          v-for="(item, index) in condition"
          :key="index"
        >
          <div class="select-box">
            <el-form-item prop="region">
              <el-input v-model="item.value" @input="selectChange(item.value, index)" :maxlength='12' placeholder="分支名称(12个字符以内)"></el-input>
            </el-form-item>
          </div>
          <div class="select-box">
            <el-form-item prop="region">
              <el-select
                size="mini"
                v-model="item.to"
                placeholder="请选择下一步节点"
                clearable
                style="width: 100%"
              >
                <el-option
                  v-for="node in nodeList"
                  :label="node.data.name"
                  :value="node.id"
                  v-show="!node.viewOnly && node.id !== currentData.id"
                  :key="node.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="select-oprate">
            <span @click="deleteCondition(item, index)"
              ><i class="V7_iconfont V7_iconV7tubiao-109 delete-span"></i
            ></span>
          </div>
        </div>
        <div class="addCondition">
          <span @click="addCondition"
            ><i class="V7_iconfont V7_iconV7tubiao_xinzeng add-span"></i>新增分支</span
          >
        </div>
      </el-form>
    </template>
    <template slot="oprate">
      <el-button @click="cancel" size="mini">取消</el-button>
      <el-button type="primary" @click="onSubmit" size="mini">确定</el-button>
    </template>
    <template slot="remove">
      <el-button @click="deleteNode" type='danger' size="mini">删除</el-button>
    </template>
  </continer>
</template>

<script lang="ts">
import { Component, Mixins, Watch } from 'vue-property-decorator'
import continer from '@/components/configCommon/ui-modules/drawer-container.vue'
import nodeEidtMixins from './nodeEidtMixins'

import remoteSelect from '@/components/configCommon/operate-modules/remoteSearch/index.vue'
import { PagingData } from '../types'
import { v4 as uuidv4 } from 'uuid'

@Component({
  name: 'im-node-menu',
  components: { continer, remoteSelect }
})
export default class extends Mixins(nodeEidtMixins) {
  private dateList = []

  private dateRemoteUrl = '/base/action/config/timecondition/query'

  private pagingData: PagingData = {
    limit: 10,
    page: 1
  }

  private query = {}
  private selectChange (name, index): void {
    this.condition[index].label = name
  }

  private addCondition () {
    this.condition.splice(this.condition.length, 0, {
      label: '',
      value: '',
      to: ''
    })
  }

  private defaultChange (value) {
    this.condition[this.condition.length - 1].to = value
  }

  @Watch('formData')
  private formDataChange (data): void {
    if (!data.nodeId) {
      this.formData.nodeId = uuidv4().replace(/-/g, '')
    }
  }
}
</script>

<style lang="stylus" scoped>
.group-title
  margin-bottom 10px
.select-oprate
  span
    padding-top 8px
    display block
    color $icon-gray
    cursor pointer
.addCondition
  display flex
  align-items center
  color $c-main
  cursor pointer
  margin-bottom 15px
  i
    font-size 12px
.delete-span
  &:hover
    color $c-danger
.add-span
  &:before
    margin-right 4px
</style>
